import React, { Component } from 'react';
import { Link } from "react-router-dom";
import PropTypes from 'prop-types';
import { NavLink } from "react-router-dom";
import '@/css/comps/wsjframe.css';

class MenuBottom extends Component {
  static propTypes = {

  }

  static defaultProps = {

  }
  constructor(props) {
    super(props)
    this.state = {
      menuHeight: 0
    }
  }
  measureHeight = () => {
    this.setState({ menuHeight: this.refMenu.offsetHeight })
  }
  componentDidMount() {
    this.measureHeight()
  }
  componentDidUpdate() { 
    if (!(this.refMenu && this.refMenu.offsetHeight > 0)) {
      setTimeout(() => {
        this.measureHeight()
      }, 0)
    } 
  }

  render() {
    let { menuHeight } = this.state
    return (
      <>
        <div style={{ height: menuHeight + 'px' }}></div>
        <div className="yt yt-ac bottom-menu-wrap" id="bottom_menu_wrap" ref={(view) => this.refMenu = view}>
          <NavLink to="/" exact activeClassName="bottom-menu-color-active" className="yt yt-ver yt-f1 yt-ac bottom-menu-color" onTouchStart={() => { }}>
            <div className="bottom-menu-pd-t"><i className="alifont font20">&#xe615;</i></div>
            <div className="bottom-menu-pd-b font12">首页</div>
          </NavLink>

          <NavLink to="/gamble" exact activeClassName="bottom-menu-color-active" className="yt yt-ver yt-f1 yt-ac bottom-menu-color" onTouchStart={() => { }}>
            <div className="bottom-menu-pd-t"><i className="alifont font20">&#xedf8;</i></div>
            <div className="bottom-menu-pd-b font12">竞猜</div>
          </NavLink>

          <NavLink to="/my" exact activeClassName="bottom-menu-color-active" className="yt yt-ver yt-f1 yt-ac bottom-menu-color" onTouchStart={() => { }}>
            <div className="bottom-menu-pd-t"><i className="alifont font20">&#xe691;</i></div>
            <div className="bottom-menu-pd-b font12">我的</div>
          </NavLink>
          <NavLink to="/contribution" exact activeClassName="bottom-menu-color-active" className="yt yt-ver yt-f1 yt-ac bottom-menu-color" onTouchStart={() => { }}>
            <div className="bottom-menu-pd-t"><i className="alifont font20">&#xe691;</i></div>
            <div className="bottom-menu-pd-b font12">笔记</div>
          </NavLink>
        </div>
      </>
    )
  }
}
export default MenuBottom
